<template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="手机号码" prop="mobile">
        <el-input v-model="ruleForm.mobile" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" />
      </el-form-item>
      <el-form-item label=" ">
        <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue'
  
  import type { FormInstance, FormRules } from 'element-plus'
  import http from '../../util/request'
  
  interface RuleForm {
    name: string
    mobile: string
    password: string
  }
  
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive<RuleForm>({
    name: 'name',
    mobile: '',
    password: '',
  })
  
  const onGetData = () => {
      http.get('/user').then((response:any)=>{
        Object.assign(ruleForm,response.data.data)
      })
  }


  const rules = reactive<FormRules<RuleForm>>({
    name: [
      { required: true, message: '请输入姓名', trigger: 'blur' },
      { min: 1, max: 10, message: '姓名1-10个字', trigger: 'blur' },
    ],
    mobile: [
      { required: true, message: '请输入手机号码', trigger: 'blur' },
    ],
  })
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  
  onMounted(()=>{
      onGetData()
  })
  </script>